<template>
    <div>
        <el-dialog
        title="教程查看"
        :visible.sync="dialogVisible"
        :close-on-press-escape="false"
        :destroy-on-close="true"
        :close-on-click-modal="false"
        :before-close="close"
        >
        <div style="background-color: transparent;width: 100%;height: 400px;display: flex;justify-content: center;align-items: center;" v-loading="isLoading">
          <div id="videoDiv2" ></div>
        </div>
        <span slot="footer" class="dialog-footer">
            <!-- <el-button @click="">取 消</el-button> -->
            <el-button type="primary" @click="close">关闭</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
    import Player from 'xgplayer';
    import 'xgplayer/dist/index.min.css';
    export default {
        name: 'CoursePlayerDialog',
        props: {
            title: {
                type: String,
                default:'新增'
            },
            // videoUrl:{
            //     type: String,
            //     default:''
            // }
            
        },
        data () {
            return {
                dialogVisible:false,
                videoUrl:'',
                isLoading:false,
                player: null
            }
        },
        mounted () {
            // alert("sfdsf");
            // for (let index = 0; index < this.fileList.length; index++) {
            //     const element = this.fileList[index];
            //     this.imageList.push(element.url);
            // }      
            // console.log(JSON.stringify(this.imageList));
            
        },
        beforeDestroy () {
            // this.player.destroy();
        },
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            coursePlayerHandle(){
                this.isLoading = true;
                setTimeout(() => {
                    this.isLoading = false;
                    this.player = new Player({
                        id: 'videoDiv2',
                        url: this.videoUrl,
                        // fullscreen: true, // 开启全屏模式
                        // screenshot: true // 开启截图功能
                    });
                    this.player.start();
                }, 1000);
            },
            // 关闭
            close(){
                this.dialogVisible = false;
                this.player.destroy();
            },
            close2(){
                alert("关闭前");
            }
            
        }
    }
</script>

<style lang="scss">

</style>